<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="count"></p>
    <p id="handle" >
        <button onclick="app()">点击+1</button>
    </p>

    <script>
        /**
         * 为什么useState 返回的是数组而不是对象
         *   根据es6数组和对象解构的区别：
         *        数组的元素是按次序排列的，数组解构时变量的取值由数组元素的位置决定，变量名可以任意命名
         *          对象的属性没有次序，解构是变量名必须与属性同名，才能取到正确的值
         *          因此使用数组会更灵活，可以任意命名state和修改state的方法名 
         * 手动实现一个 hook 方法 useState 
        */
        let _state;
        let countV = document.querySelector(".count");

        const myUseState = (initalValue) =>{
            _state = _state === undefined ? initalValue : _state

            const getState = (newValue) =>{
                _state = newValue;
                render()
            }
            return [_state, getState]
        }

        const render = () =>{
            countV.innerHTML = count;
        }
        let [count, getCount] = myUseState(0);
        countV.innerHTML = count;

        function app(){
            count = count + 1
            getCount(count);
            console.log(count);
        }

    </script>
</body>
</html>